<!--
 * @Author: LAB
 * @Date: 2021-05-19 10:12:35
 * @Description: 过滤器
 * @FilePath: \client-app\src\views\storeroom\components\tool-bar.vue
-->
<template>
  <DxToolbar v-bind="toolbarOptions">
    <template #word="{ data: word }">
      <p>{{ word }}</p>
    </template>
  </DxToolbar>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Emit, Inject, Prop, Watch } from "vue-property-decorator";
import DxButton from "devextreme-vue/button";
import { dxButtonOptions } from "devextreme/ui/button";
import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
import { dxToolbarOptions } from "devextreme/ui/toolbar";

import notify from "devextreme/ui/notify";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
let self: HisToolBar;
@Options({
  components: {
    // DxForm,
    // DxCheckBox,
    // DxTextBox,
    // DxButton,
    DxToolbar,
    DxItem,
  },
})
export default class HisToolBar extends Vue {
  toolbarOptions: dxToolbarOptions = {
    items: [
      {
        location: "before",
        template() {
          return "目录类型";
        },
      },
      {
        options: {
          width: 160,
          items: [],
          valueExpr: "id",
          displayExpr: "text",
          stylingMode: "outlined",
          // value: productTypes[0].id,
          onValueChanged: (args) => {
            // if (args.value > 1) {
            //   this.productsStore.filter("type", "=", args.value);
            // } else {
            //   this.productsStore.filter(null);
            // }
            // this.productsStore.load();
          },
        } ,
        location: "before",
        locateInMenu: "auto",
        widget: "dxSelectBox",
      },
      {
        location: "before",
        template() {
          return "目录方案";
        },
      },
      {
        options: {
          width: 160,
          items: [],
          valueExpr: "id",
          displayExpr: "text",
          stylingMode: "outlined",
          // value: productTypes[0].id,
          onValueChanged: (args) => {
           
          },
        } ,
        location: "before",
        locateInMenu: "auto",
        widget: "dxSelectBox",
      },
      {
        location: "before",
        template() {
          return "显示";
        },
      },
      {
        options: {
          width: 160,
          items: [],
          valueExpr: "id",
          displayExpr: "text",
          stylingMode: "outlined",
          // value: productTypes[0].id,
          onValueChanged: (args) => {
           
          },
        } ,
        location: "before",
        locateInMenu: "auto",
        widget: "dxSelectBox",
      },
      
    ],
  };
  mounted(){
    self = this
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding: 12px 19px;
  .range {
    display: flex;
    align-items: flex-start;
    p {
      word-break: keep-all;
      padding: 9px;
    }
    > div {
      display: flex;
      width: 180px;
      flex-wrap: wrap;
      // >div{
      //   width: 50%;
      // }
    }
  }
  .input-box {
    display: flex;
    margin-bottom: 12px;
    p {
      padding: 9px;
    }
  }
}
</style>
<style lang="scss">
.filter-container {
  background-color: #eee;
  .range {
    > div {
      > div {
        width: 50%;
        margin: 12px 0;
      }
    }
  }
}
</style>